<script setup lang="ts">
import type { IProductCategoryTreeItem } from '@fl/api/purchase/model/pricing-tool'
import type { VxeGridProps, VxeTableInstance } from 'vxe-table'

import { Search } from '@element-plus/icons-vue'
import {
    useGetCalculateRulesDetail,
    useGetCalculateRulesOptions,
    useGetOriginCategoryTree,
    useGetPricingItemList,
    useGetProductCategoryTree,
    useGetTreeNodeInfo,
    useSaveTreeNodeInfo,
} from '@fl/api/purchase'
import { SearchTable } from '@fl/components'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { treeFindLabel } from '@fl/utils/tree'
import { cloneDeep, differenceWith, isEmpty, isEqual } from 'lodash-es'

import { PRICING_PRODUCT_STATUS_MAP } from '../goods-management/constant'
import AddTreeItem from './components/add-tree-item.vue'
import { CALCULATION_TYPE } from './components/constant'
import EditFormula from './components/edit-formula.vue'
import MaterialsPriceList from './components/materials-price-list.vue'
import { IS_QUOTE_NODE } from './constant'

const props = defineProps<{
    detailData: {
        calcRule: string
        categoryId: string
        categoryName: string
        explanation: string
        priceProId: string
        productId: string
        productName: string
        specs: string
        status: number
    }
}>()
const emit = defineEmits<{
    publish: []
}>()

const { createConfirmModal } = useMessage()
const router = useRouter()

const showAddTreeItem = ref<boolean>(false)
const showEditFormula = ref<boolean>(false)
const showMaterialsPriceList = ref<boolean>(false)

const form = reactive<any>({})
const filterText = ref('')
const treeRef = ref()
const selectedTreeNodeData = ref<IProductCategoryTreeItem>(Object.create(null))
const toEditFormulaData = ref<any>()
const toCheckPriceItemData = ref<any>()

const originForm = reactive<any>({})
const originFormulaTableData = ref<any[]>([])
const originPriceTableData = ref<any[]>([])

const getTreeNodeInfoParams = computed(() => ({
    categoryId: selectedTreeNodeData.value.id,
    cbCategoryId: selectedTreeNodeData.value.cbCategoryId,
    productId: selectedTreeNodeData.value.productId,
}))
const getCalculateRulesParams = computed(() => selectedTreeNodeData.value.cbCategoryId)
const getPricingItemListParams = computed(() => ({
    cbCategoryId: selectedTreeNodeData.value.cbCategoryId,
    productId: props.detailData.productId,
}))
const getCalculateRuleDetailParams = computed(() => form.modelId)
const formulaUnit = computed(() => form.modelId
    ? treeFindLabel({ labelKey: 'unit', targetValue: form.modelId, treeData: calculateRulesOptionsData.value })
    : '')
const formulaType = computed(() => form.modelId
    ? treeFindLabel({ labelKey: 'type', targetValue: form.modelId, treeData: calculateRulesOptionsData.value })
    : '')
const isNotPublished = computed(() => props.detailData.status === PRICING_PRODUCT_STATUS_MAP.NOT_PUBLISHED)

const { data: productCategoryTreeData, isLoading: isGetProductCategoryTreeLoading } = useGetProductCategoryTree(props.detailData.productId)
const { data: originCategoryTreeData, isLoading: _isGetOriginCategoryTreeLoading } = useGetOriginCategoryTree(props.detailData.categoryId)
const { data: treeNodeInfoData, isLoading: isGetTreeNodeInfoLoading } = useGetTreeNodeInfo(getTreeNodeInfoParams)
const { data: calculateRulesOptionsData, isLoading: isGetCalculateRulesOptionsLoading } = useGetCalculateRulesOptions(getCalculateRulesParams)
const { data: pricingItemListData, isLoading: isGetPricingItemListLoading } = useGetPricingItemList(getPricingItemListParams)
const { data: calculateRulesDetailData, isLoading: isGetCalculateRulesDetailLoading } = useGetCalculateRulesDetail(getCalculateRuleDetailParams)
const { isPending: isSaveTreeNodeInfoPending, mutate: saveTreeNodeInfo } = useSaveTreeNodeInfo()

// #region Form
const formRef = ref()
const isSubmitLoading = computed(() => isSaveTreeNodeInfoPending.value)

const rules = {
    modelId: [
        { message: '请选择型号', required: false, trigger: 'change' },
    ],
}
// #endregion

// #region Formula Table
const isFormulaTableLoading = computed(() => isGetCalculateRulesDetailLoading.value || isGetTreeNodeInfoLoading.value)
const formulaTableRef = ref<VxeTableInstance>()
const formulaTableData = ref<any[]>([])

const formulaGridOptions = reactive<VxeGridProps>({
    align: 'left',
    border: 'inner',
    columns: [
        { field: 'formula', slots: { default: 'formula' }, title: '公式名称' },
        {
            editRender: { attrs: { disabled: true, type: 'number' }, name: 'input', placeholder: '请计算公式结果' },
            field: 'result',
            slots: { default: 'result' },
            title: '公式结果',
        },
        { slots: { default: 'operation' }, title: '操作', width: 100 },
    ],
    editRules: {
        result: [
            { message: '请计算公式结果', required: false, trigger: 'change' },
        ],
    },
    headerRowClassName: 'bg-white text-[#86909C] text-[14px]',
    height: undefined,
    validConfig: {
        autoPos: false,
        msgMode: 'full',
    },
})
// #endregion

// #region Price Table
const isPriceTableLoading = computed(() => isGetPricingItemListLoading.value || isGetTreeNodeInfoLoading.value)
const priceTableRef = ref<VxeTableInstance>()
const priceTableData = ref<any[]>([])

const priceGridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'itemName', title: '报价清单' },
        {
            editRender: {
                attrs: { clearable: true },
                name: 'select',
                options: [],
                placeholder: '请选择规格型号',
            },
            field: 'modelId',
            slots: { default: 'model_id' },
            title: '规格型号',
        },
        {
            // editRender: { attrs: { type: 'number' }, name: 'input', placeholder: '请输入控制价' },
            field: 'price',
            slots: { default: 'price' },
            title: '控制价',
        },
        { field: 'unit', title: '单位', width: 80 },
        {
            editRender: { attrs: { type: 'textarea' }, name: 'input', placeholder: '请输入报价说明' },
            field: 'priceDetail',
            slots: { default: 'price_detail' },
            title: '报价说明',
        },
    ],
    // editConfig: {
    //     mode: 'cell',
    //     trigger: 'click',
    // },
    // editRules: {
    //     price: [
    //         { message: '请输入控制价', required: false, trigger: 'change' },
    //     ],
    //     priceDetail: [
    //         { message: '请输入报价说明', required: false, trigger: 'change' },
    //     ],
    // },
    headerRowClassName: 'text-[#86909C] text-[14px]',
    height: undefined,
    rowConfig: {
        height: 60,
    },
    // validConfig: {
    //     autoPos: false,
    //     msgMode: 'full',
    // },
})
// #endregion

// #region UI Listener
function onAddTreeItemBtnClick() {
    showAddTreeItem.value = true
}

function onTreeNodeClick(data: IProductCategoryTreeItem) {
    if (data.cbCategoryId !== selectedTreeNodeData.value?.cbCategoryId) {
        if (isNotPublished.value) {
            let isEdited = !isEqual(toRaw(originForm), toRaw(form))
            if (!isEdited) {
                isEdited = differenceWith(originFormulaTableData.value, formulaTableData.value, (originItem: any, newItem: any) => {
                    return originItem.id === newItem.id
                        && String(originItem.result) === String(newItem.result)
                }).length > 0
            }
            if (!isEdited) {
                isEdited = differenceWith(originPriceTableData.value, priceTableData.value, (originItem: any, newItem: any) => {
                    return originItem.itemId === newItem.itemId
                        && String(originItem.modelId) === String(newItem.modelId)
                        && String(originItem.price) === String(newItem.price)
                        && String(originItem.priceDetail) === String(newItem.priceDetail)
                }).length > 0
            }
            if (isEdited) {
                createConfirmModal({
                    cancelButtonText: '不保存',
                    confirmButtonText: '保存',
                    content: '当前报价节点有改动未保存，要保存吗？',
                    onError: () => {
                        changeSelectedTreeNode(data)
                    },
                    onSuccess: () => {
                        onSaveBtnClick(false, () => {
                            changeSelectedTreeNode(data)
                        })
                    },
                    title: '提示',
                })
            }
            else {
                changeSelectedTreeNode(data)
            }
        }
        else {
            changeSelectedTreeNode(data)
        }
    }
}

function changeSelectedTreeNode(data: IProductCategoryTreeItem) {
    resetData()
    if (data.isQuote === IS_QUOTE_NODE.IS_QUOTE) {
        selectedTreeNodeData.value = data
    }
    else {
        selectedTreeNodeData.value = Object.create(null)
    }
}

function onEditFormulaBtnClick(row: any) {
    showEditFormula.value = true
    row.varData?.forEach((item: any) => {
        if (item.calculationType === CALCULATION_TYPE.RESULT) {
            item.varValue = formulaTableData.value.find((formula: any) => formula.step === item.stepId)?.result
        }
    })
    toEditFormulaData.value = row
}

function onCheckPriceBtnClick(row: any) {
    showMaterialsPriceList.value = true
    toCheckPriceItemData.value = row
    toCheckPriceItemData.value.cbCategoryId = selectedTreeNodeData.value.cbCategoryId
}

function onSaveFormulaResult(params: any, result: number, step: number) {
    formulaTableData.value.forEach((item: any) => {
        if (item.formula === params.formula && item.step === step) {
            item.result = result
            item.varData = params.varParams
        }
    })
}

function onPriceItemInsert(price: number) {
    toCheckPriceItemData.value.price = price
}

function onPublishBtnClick() {
    onSaveBtnClick(true)
}

async function onSaveBtnClick(publishOnSuccess: boolean = false, callback?: () => void) {
    const validateResults = await Promise.all([validateForm(), validateFormulaTable(), validatePriceTable()])
    if (validateResults.every((item: any) => item === undefined)) {
        const productId = props.detailData.productId
        const categoryId = selectedTreeNodeData.value.id
        const cbCategoryId = selectedTreeNodeData.value.cbCategoryId
        const ruleId = form.modelId
        const model = treeFindLabel({ targetValue: ruleId, treeData: calculateRulesOptionsData.value })

        const formulaSaveParam = (formulaTableData.value || []).map(item => ({
            ...item,
            categoryId,
            productId,
            ruleId,
            varData: JSON.stringify(item.varData),
        }))
        const itemParam = priceTableData.value.map((item: any) => ({
            categoryId,
            itemId: item.itemId,
            itemName: item.itemName,
            model: treeFindLabel({
                labelKey: 'modelName',
                targetValue: item.modelId,
                treeData: item.children,
                valueKey: 'modelId',
            }),
            modelId: item.modelId,
            price: item.price,
            priceDetail: item.priceDetail,
            productId,
            unit: item.unit,
        }))
        const priceParam = {
            categoryId,
            id: treeNodeInfoData.value?.productCategoryPriceVO?.id,
            model,
            productId,
            ruleId,
            ruleType: formulaType.value,
            totalPrice: form.totalPrice,
            unit: formulaUnit.value,
            usage: formulaSaveParam.length ? formulaSaveParam.at(-1).result : undefined,
        }
        const params = {
            categoryId,
            cbCategoryId,
            formulaSaveParam,
            itemParam,
            priceParam,
            productId,
            ruleId,
        }
        saveTreeNodeInfo(params, {
            onSuccess() {
                Object.assign(originForm, cloneDeep(form))
                originFormulaTableData.value = cloneDeep(formulaTableData.value)
                originPriceTableData.value = cloneDeep(priceTableData.value)
                if (publishOnSuccess) {
                    emit('publish')
                }
                else {
                    ElMessage.success('操作成功')
                    if (callback) {
                        callback()
                    }
                }
            },
        })
    }
}

function onCancelBtnClick() {
    router.back()
}

function onPricingItemModelChange(value: any, row: any) {
    row.price = row.children.find((item: any) => item.modelId === value)?.referPrice
}

function onPricingItemPriceChange(row: any) {
    row.price = Math.abs(row.price?.replace(
        /^(-)*(\d+)\.(\d\d\d\d).*$/,
        '$1$2.$3',
    ))
}
// #endregion

function resetData() {
    toEditFormulaData.value = null
}

async function validateForm() {
    try {
        await formRef.value.validate()
    }
    catch (error) {
        return error
    }
}

async function validateFormulaTable() {
    const $formulaTable = (formulaTableRef.value as any)?.tableInstance
    if ($formulaTable) {
        const errMap = await $formulaTable.fullValidate(true)
        if (errMap) {
            return errMap
        }
    }
}

async function validatePriceTable() {
    const $priceTable = (priceTableRef.value as any)?.tableInstance
    if ($priceTable) {
        const errMap = await $priceTable.fullValidate(true)
        if (errMap) {
            return errMap
        }
    }
}

function filterNode(value: string, data: { [key: string]: any }) {
    if (!value)
        return true
    return data.categoryName.includes(value)
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

watch(() => form.modelId, (newValue, _oldValue) => {
    if (newValue === undefined) {
        formulaTableData.value = []
    }
    else {
        const productCategoryPriceVO = treeNodeInfoData.value?.productCategoryPriceVO
        const modelId = treeFindLabel({
            labelKey: 'value',
            targetValue: productCategoryPriceVO?.model,
            treeData: calculateRulesOptionsData.value,
            valueKey: 'label',
        })
        if (modelId !== undefined && newValue === modelId) {
            loadFormulaTableData()
        }
        else {
            formulaTableData.value = cloneDeep(calculateRulesDetailData.value)
        }
    }
})

watchEffect(() => {
    loadFormData()
})

watchEffect(() => {
    loadFormulaTableData()
})

watchEffect(() => {
    loadPriceTableData()
})

function loadFormData() {
    const formData = Object.create(null)
    const productCategoryPriceVO = treeNodeInfoData.value?.productCategoryPriceVO
    if (!isEmpty(productCategoryPriceVO)) {
        const modelId = treeFindLabel({
            labelKey: 'value',
            targetValue: productCategoryPriceVO?.model,
            treeData: calculateRulesOptionsData.value,
            valueKey: 'label',
        })
        formData.modelId = modelId
        formData.totalPrice = productCategoryPriceVO.totalPrice
    }
    else {
        formData.modelId = undefined
        formData.totalPrice = undefined
    }
    Object.assign(form, formData)
    Object.assign(originForm, formData)
}

function loadFormulaTableData() {
    let tableData: any[]
    const formulaVOS = treeNodeInfoData.value?.formulaVOS
    if (formulaVOS?.length) {
        if (isNotPublished.value) {
            tableData = cloneDeep(calculateRulesDetailData.value || []).map((formulaItem: any) => {
                const savedItem = formulaVOS.find((savedFormulaItem: any) => savedFormulaItem.formula === formulaItem.formula)
                if (savedItem) {
                    const savedVarData = savedItem.varData
                    const varData = formulaItem.varData
                    varData.forEach((varDataItem: any) => {
                        const savedVarDataItem = savedVarData.find((savedVarDataItem: any) => savedVarDataItem.varName === varDataItem.varName)
                        if (savedVarDataItem) {
                            varDataItem.varValue = savedVarDataItem.varValue
                            varDataItem.calCategoryDataId = savedVarDataItem.calCategoryDataId
                        }
                    })
                    return {
                        ...formulaItem,
                        result: savedItem.result,
                        varData,
                    }
                }
                return formulaItem
            })
        }
        else {
            tableData = cloneDeep(formulaVOS)
        }
    }
    else {
        tableData = cloneDeep(calculateRulesDetailData.value)
        if (calculateRulesDetailData.value) {
            const index = calculateRulesDetailData.value.findIndex((item: any) => item.type === 1)
            if (index !== -1) {
                const productCategoryPriceVO = treeNodeInfoData.value?.productCategoryPriceVO
                tableData[index].result = productCategoryPriceVO?.usage
            }
        }
    }
    formulaTableData.value = cloneDeep(tableData)
    originFormulaTableData.value = cloneDeep(tableData)
}

function loadPriceTableData() {
    let tableData: any[]
    const cbProductCategoryItemVOS = treeNodeInfoData.value?.cbProductCategoryItemVOS
    if (cbProductCategoryItemVOS?.length) {
        if (isNotPublished.value) {
            tableData = cloneDeep(pricingItemListData.value || []).map((pricingItem: any, _index: number) => {
                const savedPricingItem = cbProductCategoryItemVOS.find((savedPricingItem: any) => savedPricingItem.itemId === pricingItem.itemId)
                if (savedPricingItem) {
                    return {
                        ...savedPricingItem,
                        children: pricingItem.children,
                    }
                }
                return pricingItem
            })
        }
        else {
            tableData = cloneDeep(cbProductCategoryItemVOS).map((savedPricingItem: any, _index: number) => {
                const pricingItem = pricingItemListData.value?.find((pricingItem: any) => pricingItem.itemId === savedPricingItem.itemId)
                if (pricingItem) {
                    return {
                        ...savedPricingItem,
                        children: pricingItem.children,
                    }
                }
                return savedPricingItem
            })
        }
    }
    else {
        tableData = cloneDeep(pricingItemListData.value)
    }
    priceTableData.value = cloneDeep(tableData)
    originPriceTableData.value = cloneDeep(tableData)
}

const data = computed(() => ({ ...form }))

defineExpose({
    data,
})
</script>

<template>
    <el-container class="h-full">
        <el-aside width="340px"
                  class="p-20 mr-20 bg-white"
        >
            <el-skeleton v-if="isGetProductCategoryTreeLoading"
                         animated
            />

            <el-row v-else
                    :gutter="10"
            >
                <el-col :span="24">
                    <el-button v-if="isNotPublished"
                               class="w-full"
                               type="primary"
                               @click="onAddTreeItemBtnClick"
                    >
                        添加子部门
                    </el-button>
                </el-col>

                <el-col :span="24">
                    <el-input v-model="filterText"
                              class="mt-20"
                              placeholder="请输入内容进行搜索"
                              :prefix-icon="Search"
                    />
                </el-col>

                <el-col :span="24">
                    <el-tree ref="treeRef"
                             class="mt-20 w-full"
                             :data="productCategoryTreeData"
                             :props="{ children: 'children', label: 'categoryName' }"
                             default-expand-all
                             :expand-on-click-node="false"
                             :filter-node-method="filterNode"
                             @node-click="onTreeNodeClick"
                    >
                        <template #default="{ node }">
                            <el-tooltip effect="dark"
                                        :content="node.label"
                                        placement="top-start"
                            >
                                <span>{{ node.label }}</span>
                            </el-tooltip>
                        </template>
                    </el-tree>
                </el-col>
            </el-row>
        </el-aside>

        <el-main v-if="!isEmpty(selectedTreeNodeData)"
                 class="!p-0"
        >
            <el-card>
                <el-skeleton v-if="isGetCalculateRulesOptionsLoading"
                             animated
                />

                <el-form v-else
                         ref="formRef"
                         :model="form"
                         label-width="auto"
                         :rules="rules"
                         label-position="top"
                >
                    <el-row>
                        <el-col :span="24">
                            <span class="text-[20px] font-semibold">{{ detailData.productName }}</span>
                        </el-col>

                        <el-col :span="24"
                                class="mt-20"
                        >
                            <el-row :gutter="50">
                                <el-col :span="8">
                                    <el-form-item prop="totalPrice"
                                                  label="金额"
                                    >
                                        <el-input v-model="form.totalPrice"
                                                  placeholder=""
                                                  class="flex-1"
                                                  disabled
                                        />

                                        <span class="ml-8 leading-32">元</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-col>

                        <el-col :span="24"
                                class="mt-20"
                        >
                            <span class="text-[20px] font-semibold">工程量</span>
                        </el-col>

                        <el-col :span="24">
                            <el-row :gutter="50">
                                <el-col :span="8">
                                    <el-row>
                                        <el-col :span="24"
                                                class="mt-20"
                                        >
                                            <el-form-item prop="modelId"
                                                          label="型号"
                                            >
                                                <el-select v-model="form.modelId"
                                                           placeholder="请选择"
                                                           clearable
                                                >
                                                    <el-option v-for="item in calculateRulesOptionsData"
                                                               :key="item.value"
                                                               :label="item.label"
                                                               :value="item.value"
                                                    />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-col>

                        <el-col :span="24"
                                class="mt-20"
                        >
                            <div>
                                <SearchTable v-bind="formulaGridOptions"
                                             ref="formulaTableRef"
                                             :loading="isFormulaTableLoading"
                                             :data="formulaTableData"
                                >
                                    <template #formula="{ row }">
                                        <el-input v-model="row.formula"
                                                  disabled
                                        />
                                    </template>

                                    <template #result="{ row }">
                                        <el-input v-model="row.result"
                                                  :disabled="row.type !== 1"
                                                  type="number"
                                                  class="!w-[80%]"
                                        />

                                        <span class="ml-16 inline-block text-left" />
                                    </template>

                                    <template #operation="{ row }">
                                        <el-button v-if="row.type !== 1"
                                                   text
                                                   class="!p-4"
                                                   type="primary"
                                                   @click="onEditFormulaBtnClick(row)"
                                        >
                                            修改
                                        </el-button>
                                    </template>
                                </SearchTable>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="mt-20">
                <el-skeleton v-if="isGetPricingItemListLoading"
                             animated
                />

                <el-row v-else>
                    <el-col :span="24">
                        <div>
                            <SearchTable v-bind="priceGridOptions"
                                         ref="priceTableRef"
                                         :loading="isPriceTableLoading"
                                         :data="priceTableData"
                            >
                                <template #model_id="{ row }">
                                    <span v-if="row.children?.length === 0">-</span>

                                    <el-select v-else
                                               v-model="row.modelId"
                                               placeholder="请选择规格型号"
                                               clearable
                                               @change="onPricingItemModelChange($event, row)"
                                    >
                                        <el-option v-for="item in (row.children || [])"
                                                   :key="item.modelId"
                                                   :label="item.modelName"
                                                   :value="item.modelId"
                                        />
                                    </el-select>
                                </template>

                                <template #price="{ row }">
                                    <el-input v-model="row.price"
                                              placeholder="请输入价格"
                                              type="number"
                                              class="!w-[50%]"
                                              @change="onPricingItemPriceChange(row)"
                                    />

                                    <el-button class="refer-price-btn ml-8 truncate !p-0"
                                               :class="{ invisible: !((row.children?.length === 0) || !detailData.priceProId) }"
                                               text
                                               @click="onCheckPriceBtnClick(row)"
                                    >
                                        查看参考价
                                    </el-button>
                                </template>

                                <template #price_detail="{ row }">
                                    <el-input v-model="row.priceDetail"
                                              placeholder="请输入报价说明"
                                              type="textarea"
                                              maxlength="500"
                                              show-word-limit
                                    />
                                </template>
                            </SearchTable>
                        </div>
                    </el-col>

                    <el-col :span="24"
                            class="mt-50 justify-center !flex"
                    >
                        <SubmitBtn v-if="isNotPublished"
                                   type="primary"
                                   :loading="isSubmitLoading"
                                   @click="onPublishBtnClick"
                        >
                            发布
                        </SubmitBtn>

                        <SubmitBtn v-if="isNotPublished"
                                   type="primary"
                                   :loading="isSubmitLoading"
                                   @click="onSaveBtnClick"
                        >
                            保存
                        </SubmitBtn>

                        <el-button @click="onCancelBtnClick">
                            取消
                        </el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-main>
    </el-container>

    <AddTreeItem v-model:visible="showAddTreeItem"
                 :selected-tree-data="productCategoryTreeData"
                 :product-id="props.detailData.productId"
                 :origin-tree-data="originCategoryTreeData"
    />

    <EditFormula v-model:visible="showEditFormula"
                 :formula-data="toEditFormulaData"
                 @save="onSaveFormulaResult"
    />

    <MaterialsPriceList v-model:visible="showMaterialsPriceList"
                        :price-item-data="toCheckPriceItemData"
                        @insert="onPriceItemInsert"
    />
</template>

<style scoped lang="scss">
:deep(.el-form-item--default) {
    margin-bottom: 0;
}
:deep(.vxe-table--body-wrapper) {
    min-height: 48px !important;
}
:deep(.vxe-grid--toolbar-wrapper) {
    display: none;
}
:deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #fff0f0;
    color: #da0004;
}
:deep(.el-button.is-text.refer-price-btn) {
    color: #409eff;
    &.is-disabled {
        color: #a8abb2;
    }
}
</style>
